<template>
  <div class="container center">
    <div class="info h-100">
      <div class="header">
        <h2>基本信息</h2>
      </div>

      <el-form
        :model="shopForm"
        :rules="rules"
        ref="shopForm"
        label-width="180px"
        class="demo-shopForm"
        :label-position="labelPosition"
        size="mini"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="shopForm.companyName" clearable></el-input>
        </el-form-item>
        <el-form-item label="公司英文名称" prop="companyEnName">
          <el-input v-model="shopForm.companyEnName" clearable></el-input>
          请填写贵公司的英文名称，如果有的话。不多于 256 个字符。
        </el-form-item>
        <el-form-item label="工商注册号/统一社会信用代码" prop="idNumber">
          <el-input v-model.number="shopForm.idNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label="员工规模" prop="scale">
          <el-select v-model="shopForm.scale" placeholder="请选择员工规模">
            <el-option label="100人以下" value="100人以下"></el-option>
            <el-option label="100-200人" value="100-200人"></el-option>
            <el-option label="200-300人" value="200-300人"></el-option>
            <el-option label="300-400人" value="300-400人"></el-option>
            <el-option label="400-500人" value="400-500人"></el-option>
            <el-option label="500人以上" value="500人以上"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="平台托管">
          <el-switch
            v-model="shopForm.delivery"
            active-text="同意"
            inactive-text="不同意"
          ></el-switch>
        </el-form-item> -->
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="shopForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="shopForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="description">
          <el-input type="textarea" v-model="shopForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('shopForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('shopForm')">重置</el-button>
          <el-button @click="JumpInfo">查看店铺信息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { eventBus } from "@/utils/eventBus";
import { formData } from "@/mockApi/information/user";

export default {
  name: "DecorationVue",
  components: {},
  data() {
    return {
      shopForm: {
        description: "",
        companyEnName: "",
        idNumber: null,
        companyName: "",
        scale: "",
        resource: "",
        type: [],
      },
      rules: {
        companyName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur",
          },
        ],
        idNumber: [
          { required: true, message: "工商注册号或统一社会信用代码不得为空！" },
          { type: "number", message: "必须为数字值！" },
        ],
        scale: [
          { required: true, message: "请选择员工规模！", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
      labelPosition: "left",
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success(`提交成功，正在跳转...`);
          console.log("data----", this.shopForm, Object.entries(this.shopForm));
          formData
            .append(this.shopForm)
            .then((res) => {
              console.log("res----", res);
            })
            .finally(() => {
              this.$router.push("/home/6-1");
              eventBus.$emit("jumpRouter", "/home/6-1");
            });
        } else {
          this.$message.error(`提交失败，请检查是否漏填必填项！`);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    JumpInfo() {
      this.$router.push("/home/6-1");
      eventBus.$emit("jumpRouter", "/home/6-1");
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 60px 0;
  .info {
    width: 600px;
    // height: 800px;
    padding: 15px 35px;
    border: 5px solid black;
    background-color: white;
    border-radius: 45px;
    .header {
      margin-bottom: 10px;
    }
  }
}
</style>
